<template>
  <div style="width: 80%;margin-left: 10%;margin-top: 40px;background: white;padding: 30px;border-radius: 2px">
    <Row>
      <h2 class="ui center aligned centered icon header">Acrion Pane</h2>
    </Row>
    <Row>
      <Col span="12" style="border-right: 1px solid white">
        <div class="card">
          <div class="blurring dimmable image"
               style="width: 600px!important;height: 200px!important;overflow: hidden;: hidden">
            <div class="ui dimmer">
              <div class="content">
                <div class="center">
                  <div class="ui inverted button">Play</div>
                </div>
              </div>
            </div>
            <img src="/src/assets/actionPane/img_868458.jpg">
          </div>
        </div>
      </Col>
      <Col span="12">
        <Row>
          <Col span="12">
            <Card :bordered="false" style="background: rgb(0, 161, 233)">
              <p slot="title">My work</p>
              <p>Content of work</p>
              <p>Work of one thing</p>
              <p>Something in here</p>
            </Card>
          </Col>
          <Col span="11" offset="1">
            <Card :bordered="false" style="background: rgb(0, 161, 233)">
              <p slot="title">My Recent Documents</p>
              <p>Documents of Jabil</p>
              <p>doc of final work</p>
              <p>software user guide</p>
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
  export default {
    name: "actionPane",
    mounted () {
      $('.card .image').dimmer({
        on: 'hover'
      });
    }
  }
</script>

<style scoped>
</style>
